<template>
  <div class="app-container">
    <el-descriptions :column="4" class="margin-top" title="产品详情" border>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          预览图
        </template>
        <el-image :src="item.img" :preview-src-list="[ item.img ]" fit="cover" style="width: 100px; height: 100px" shape="square"/>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          产品名称
        </template>
        {{ item.productName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户名称
        </template>
        <router-link :to="'/user/detail/' + item.userId">
          {{ item.userName }}
        </router-link>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          产品单价
        </template>
        {{ item.price }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          产品规格
        </template>
        {{ item.unit }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          产品库存
        </template>
        <div v-if="item.quantity == -1">评估中</div>
        <div v-else>{{ item.quantity }}</div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          种植面积
        </template>
        <div v-if="item.area == -1">无</div>
        <div v-else>{{ item.area }}亩</div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          审核情况
        </template>
        <div v-if="item.judgeFlag === '-1'">
          <el-tag type="danger"> 驳回 </el-tag>
        </div>
        <div v-else-if="item.judgeFlag == '0'">
          <el-tag> 待审核 </el-tag>
        </div>
        <div v-else-if="item.judgeFlag == '1'">
          <el-tag type="success"> 通过 </el-tag>
        </div>
      </el-descriptions-item>

    </el-descriptions>
  </div>
</template>
<script>
import productApi from '@/api/trace/product'
export default {
  data() {
    return {
      item: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        const params = {
          id: id
        }
        this.getInfo(params)
      } else {
        this.item = {}
      }
    },
    getInfo(id) {
      productApi.detail(id)
        .then(response => {
          this.item = response.data.item
        })
    }
  }
}
</script>
